<template>
  <!-- 当事患者信息 -->
  <div v-if="thisDiv === 3">
    <table>
      <slot name="left"/>
      <tr>
        <td class="td-title">姓名</td>
        <td>{{ formData.baqsjRecordProperty.patientName || '' }}</td>
        <td class="td-title">年龄</td>
        <td>{{ formData.baqsjRecordProperty.patientAge || '' }}岁</td>
        <td class="td-title">患者类型</td>
        <td>{{ getPatientType(formData.baqsjRecordProperty.patientType) || '' }}</td>
      </tr>
      <tr>
        <td class="td-title">诊断/手术名称</td>
        <td>{{ formData.baqsjRecordProperty.currentDiagnosis || '' }}</td>
        <td class="td-title">病历号/住院号</td>
        <td colspan="3">{{ formData.baqsjRecordProperty.patientNo || '' }}</td>
      </tr>
      <slot name="right"/>
    </table>
  </div>
  <div v-else style="display: flex; width: 100%; flex-wrap: wrap; ">
    <slot name="left"/>
    <el-form-item label="姓名" prop="baqsjRecordProperty.patientName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入姓名"
        v-model="formData.baqsjRecordProperty.patientName"
      />
    </el-form-item>

    <el-form-item label="年龄" prop="baqsjRecordProperty.patientAge">
      <el-input
        :style="{ width: '200px' }"
        type="number"
        :min="0"
        :max="100"
        :step="1"
        placeholder="请输入年龄"
        v-model.number="formData.baqsjRecordProperty.patientAge"
        @input="handleInput"
      ><template slot="append">岁</template></el-input>
    </el-form-item>
    <slot name="center"/>
    <el-form-item label="病历号/住院号" prop="baqsjRecordProperty.patientNo">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入病历号/住院号"
        v-model="formData.baqsjRecordProperty.patientNo"
      />
    </el-form-item>

    <el-form-item label="患者类型" prop="baqsjRecordProperty.patientType">
      <el-radio-group v-model="formData.baqsjRecordProperty.patientType">
        <el-radio v-for="(item, index) in patientTypeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="诊断/手术名称" prop="baqsjRecordProperty.currentDiagnosis">
      <el-input
        :style="{ width: '300px' }"
        placeholder="请输入诊断/手术名称"
        v-model="formData.baqsjRecordProperty.currentDiagnosis"
      />
<!--  药物不良反应事件(独有)    -->
      <el-button
        v-if="formData.eventNo === 'MedicalBadReaction'"
        type="primary"
        style="margin-left: 10px"
        icon="el-icon-search"
        @click="openUserModel()"
      >查询患者信息</el-button>
    </el-form-item>
    <slot name="right"/>
<!--    弹出框-->
    <el-dialog
      title="患者信息"
      :visible.sync="userModel"
      width="90%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <el-form :model="searchInfo" :inline="true" size="small">
          <el-form-item label="登记号：">
            <el-input v-model="searchInfo.patientName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="住院号：">
            <el-input v-model="searchInfo.patientNo" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="卡    号：">
            <el-input v-model="searchInfo.patientName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="姓    名：">
            <el-input v-model="searchInfo.patientName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="onSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="dataList" stripe>
          <el-table-column label="登记号" prop="patientName" align="center" />
          <el-table-column label="卡号" prop="patientName" align="center" />
          <el-table-column label="姓名" prop="patientName" align="center" />
          <el-table-column label="年龄" prop="patientAge" align="center" />
          <el-table-column label="性别" prop="patientSex" align="center" />
          <el-table-column label="科室" prop="patientName" align="center" />
          <el-table-column label="病区" prop="wardName" align="center" />
          <el-table-column label="床位" prop="bedNo" align="center" />
          <el-table-column label="住院号" prop="patientNo" align="center" />
          <el-table-column label="门诊/入院时间" prop="inTime" align="center" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="selectUser(scope.row)">选择患者</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="pageInfo.total > 0" :total="pageInfo.total" :page.sync="pageInfo.currentPage" :limit.sync="pageInfo.pageSize" @pagination="onPagination" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userModel = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBaqsjRecordProperty } from '@/api/report/reportForm'

export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    thisDiv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      userModel: false,
      // 查询条件
      searchInfo: {
        processedStatus: ''
      },
      // 分页组件
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // table相关
      loading: false, // loading加载
      dataList: [],
      patientTypeList: [
        { value: '0', label: '住院病人' },
        { value: '1', label: '门诊病人' },
        { value: '2', label: '急诊病人' }
      ]
    }
  },
  methods: {
    getPatientType(value) {
      const item = this.patientTypeList.find(item => item.value === value)
      return item ? item.label : value
    },
    handleInput(value) {
      // 如果值小于最小值，设置为最小值
      if (value < 0) {
        this.formData.baqsjRecordProperty.patientAge = 0
      }
      // 如果值大于最大值，设置为最大值
      if (value > 100) {
        this.formData.baqsjRecordProperty.patientAge = 100
      }
    },
    openUserModel() {
      this.userModel = true
      this.onSearch()
    },
    selectUser(row) {
      console.log('row', row)
      this.formData.baqsjRecordProperty.patientName = row.patientName
      this.formData.baqsjRecordProperty.patientAge = row.patientAge
      this.formData.baqsjRecordProperty.patientNo = row.patientNo
      this.formData.baqsjRecordProperty.patientType = '' + row.patientType
      this.userModel = false
    },
    // 搜索
    onSearch() {
      this.pageInfo.currentPage = 1
      this.getList()
    },
    // 重置
    resetQuery() {
      this.timeValue = []
      this.pageInfo.currentPage = 1
      this.searchInfo = {}
      this.getList()
    },
    // 分页
    onPagination(obj) {
      this.pageInfo.currentPage = obj.page
      this.pageInfo.pageSize = obj.limit
      this.getList()
    },
    // 列表数据
    getList() {
      const params = {
        ...this.searchInfo,
        ...this.pageInfo
      }
      getBaqsjRecordProperty(params).then(res => {
        const data = res.records
        this.dataList = data
        this.pageInfo.total = res.total
      })
    }
  },
  getUserInfo() {
    // 搜索用户信息
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
